<template>
  <!-- 折线图、柱形图 -->
  <div class="chart-box">
    <div id="chartThree" class="chart"></div>
  </div>
</template>

<script>
import {hexToRgba, resize, spaceTxt, downloadChartImg} from '@/utils/utils'
export default {
  mixins: [resize],
  data() {
    return {
      info: {},
      chartData: [],
      chartThree: null,
      graphType: 'bar',
      colors: ['#79e2ff', '#A5F7B9']
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.getData()
    },
    getData() {
      this.$get(this.$Url.team.academicFieldAnalysis, {
        pid: this.info.key
      }).then(res => {
        let data = (res.data && res.data.agg && res.data.agg.keywords) || []
        if (data.length <= 0) {
          this.$emit('chartThreeNoData', true)
          return
        }
        let xArr = []
        let chartData = []
        data.forEach(v => {
          xArr.push(v.key)
        })
        xArr.forEach(v => {
          let arr = [v]
          data.forEach(b => {
            let count = '-'
            if (b.key === v) {
              count = b.doc_count
            }
            arr.push(count)
          })
          chartData.push(arr)
        })
        chartData = [
          ['product', ...xArr],
          ...chartData
        ]
        this.chartData = chartData
        this.renderChart()
      }).catch(err => {})
    },
    renderChart() {
      this.chartThree = this.$echarts.init(document.getElementById('chartThree'))
      let seriesData = this.getSeriesData()
      // 图例
      let legend = {
        type: 'plain',
        show: true,
        left: '2%',
        right: '3%',
        bottom: '3%',
        icon: 'circle',
        textStyle: {
          color: '#6b6c7e'
        },
      }
      // 提示框
      let tooltip = {
        confine: true,
        show: true,
        // trigger: 'axis',
        backgroundColor: "#fff",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        borderRadius: 0,
        padding: 5,
        textStyle: {
          fontWeight: 'normal',
          color: "#000",
        },
        formatter: (params) => {
          let param = params[0]
          let value = param.data.find(v => v !== param.name && v !== '-')
          let index = param.data.findIndex(v => v !== param.name && v !== '-')
          return `${params[index-1].marker}${param.name}：${value}`
        }
      }
      let option = {
        // 提示框
        tooltip,
        // 图例
        legend,
        // 背景色
        backgroundColor: '#fff',
        // 数据集
        dataset: {
          source: JSON.parse(JSON.stringify(this.chartData))
        },
        xAxis: {
          type: 'category',
          name: '学术领域',
          nameTextStyle: {
            color: '#747FD0'
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            rotate: 40,
            interval: 0,
            margin: 10,
            textStyle: {
              color: "#9e9e9e"
            },
            formatter: (label) => {
              return spaceTxt(label, 10)
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '申请量',
          nameTextStyle: {
            padding: [0, 0, 0, -40],
            color: '#747FD0'
          },
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f0f1f3"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f0f1f3",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#9e9e9e"
            }
          }
        },
        series: seriesData
      }
      
      option.tooltip.trigger = 'axis'
      option.grid = {
        top: "40px",
        right: "70px",
        // bottom: "10%",
        left: "30px",
        containLabel: true
      }

      this.chartThree.setOption(option, true)

    },
    getSeriesData() {
      let seriesData = []
      for (let i=0; i<this.chartData.length; i++) {
        if (this.chartData[i][0] !== 'product') {
          let obj = {
            type: this.graphType,
            id: this.chartData[i][0],
            name: this.chartData[i][0],
            seriesLayoutBy: 'row',
            symbol: 'circle',
            symbolSize: '8',
            connectNulls: true,
            smooth: true,
            scale: true,
            barMaxWidth: 24,
            barGap: '-100%',
            connectNulls: false,
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#6b6c7e',
                fontSize: 12,
                formatter: (params) => {
                  let value = params.data[params.encode.y[0]]
                  if (value === 0) { // 如果为0，则不展示label
                    value = ''
                  }
                  return value
                }
              }
            },
            universalTransition: true,
            animationDurationUpdate: 1000,
          }
          // if (this.chartConfig.needStack) {
          //   obj['stack'] = 'all'
          // }
          seriesData.push(obj)
        }
      }
      return seriesData
    },
    // 保存图片
    downloadImg() {
      downloadChartImg(this.chartThree)
    }
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 300px;
  // &:before {
  //   display: block;
  //   width: 100%;
  //   padding-top: calc(100%/2.5);
  //   content: " ";
  // }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $color2;
  }
}
</style>